<template>
  <div class="goods-index">
    <el-button icon="el-icon-circle-plus-outline" @click="add">添加</el-button>
    <v-list @edit="editGoods"></v-list>
    <v-info :info="info" ref="info"></v-info>
  </div>
</template>
<script>
import vList from "./list";
import vInfo from "./info";
export default {
  components: {
    vList,
    vInfo,
  },
  data() {
    return {
      info: {
        isShow: false,
        isAdd: false,
      },
    };
  },
  methods: {
    add() {
      // 打开添加的弹窗
      this.info.isAdd = true;
      this.info.isShow = true;
      this.$refs.info.getList();
    },
    editGoods(val) {
      this.$refs.info.setStatus({ ...val });
      this.info.isAdd = false;
      this.info.isShow = true;
    },
  },
};
</script>
<style lang="">
/* 覆盖element的样式，首先检察元素，找到元素得class名，使用组件根元素的class名作为父级*/
.goods-index .el-button.el-button--default {
  background-color: #fb6d49;
  color: #fff;
}
</style>